<template>
  <div class="timeAxis-box" :style="{ background: colorList5[store.styleInfo.colorType - 1].background }">
    <!-- 首页 -->
    <homeSwiper :fixedType="tabListType" />
    <div
      :class="{
        'timeAxis-child-box-bgc1': store.styleInfo.colorType == 1,
        'timeAxis-child-box-bgc2': store.styleInfo.colorType == 2,
        'timeAxis-child-box-bgc3': store.styleInfo.colorType == 3,
      }"
      id="timeAxis-child-box-id"
      class="timeAxis-child-box"
      ref="affixContainerRef"
      :style="{ backgroundColor: colorList5[store.styleInfo.colorType - 1].background }"
    >
      <div
        class="right-flot"
        :class="{ 'right-flot': !fixedType, 'right-fixed': fixedType, 'template5-right-loop': route.meta.loopType }"
      >
        <rightMenu />
      </div>

      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
      <!-- <router-view></router-view> -->

      <footers />
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { unitList } from '@/utils/unitList';
import titles from './components/title.vue';
import footers from './components/footer.vue';
import homeSwiper from './components/homeSwiper.vue';
import rightMenu from './components/rightMenu.vue';
import paginationPage from './components/paginationPage.vue';
import { pagerCount } from '@/utils/minxin';
import { colorList5 } from '../data';
import { exhibitionData } from '@/api/templates/templates';
import seach from '../components/seach.vue';
import { useRouter, useRoute } from 'vue-router';
import { ref, reactive, nextTick, onMounted, onBeforeUnmount, watch } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { useProjectStore } from '@/store';
import { storeToRefs } from 'pinia';

const store = useProjectStore();
const route = useRoute();
const viewportHeight = ref(0);
const fixedType = ref(false);
const tabListType = ref(false);
const { styleInfo } = storeToRefs(store);
//
viewportHeight.value = window.innerHeight;

const handleFixedChange = (e) => {
  // console.log(viewportHeight.value); //953
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  // console.log(scrollTop); //781
  if (scrollTop > viewportHeight.value - 280) {
    fixedType.value = true;
  } else {
    fixedType.value = false;
  }
  if (scrollTop < viewportHeight.value - 180) {
    tabListType.value = false;
  } else {
    tabListType.value = true;
  }
};
if (store.childModel && store.childModel.id === 0 && store.styleInfo.moduleList[0]) {
  nextTick(() => {
    store.setchildModel(store.styleInfo.moduleList[0]);
  });
}
let nums = store.styleInfo.moduleList.findIndex((el) => {
  return el.id == store.childModel.id;
});
if (nums == -1) {
  if (store.styleInfo.moduleList[0]) {
    store.setchildModel(store.styleInfo.moduleList[0]);
  }
}
onMounted(() => {
  nextTick(() => {
    window.addEventListener('scroll', handleFixedChange);
  });
});

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleFixedChange);
});
store.styleInfo = unitList;
watch(
  styleInfo,
  () => {
    if (store.childModel.id !== 0) {
      store.styleInfo.moduleList.forEach((el) => {
        if (el.id == store.childModel.id) {
          store.setchildModel(el);
        }
      });
      return;
    }
    if (store.childModel.id === 0 && store.styleInfo.moduleList[0]) {
      nextTick(() => {
        store.setchildModel(store.styleInfo.moduleList[0]);
      });
    }
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
@import './index.less';
.timeAxis-child-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding-top: 80px;
}
.timeAxis-child-box-bgc1 {
  background-image: url('@/assets/templateImg/routeBgc1.jpg');
}
.timeAxis-child-box-bgc2 {
  background-image: url('@/assets/templateImg/routeBgc2.jpg');
}
.timeAxis-child-box-bgc3 {
  background-image: url('@/assets/templateImg/routeBgc3.jpg');
}
.right-flot {
  position: absolute;
  top: 74px;
  right: 30px;
  // right: 73px;
  z-index: 90;
  // transition: all 0.5s;
  :deep(.right-boxs) {
    border-radius: 8px 0 0 8px !important;
  }
}
.right-fixed {
  position: fixed;
  top: 340px;
  // right: 5px;
  right: -56px;
  z-index: 90;
  transition: all 0.5s;
  :deep(.right-boxs) {
    border-radius: 8px 0 0 8px !important;
  }
}
.right-fixed:hover {
  right: 0px !important;
}
.template5-right-loop {
  right: -52px !important;
  transition: all 0.5s;
}
.template5-right-loop:hover {
  right: 0px !important;
}
@media screen and (max-height: 1140px) {
  .right-fixed {
    top: 100px;

    // transition: all 0.5s;
  }
}
:deep(.iconfonts) {
  user-select: none;
  -webkit-user-select: none; /* Chrome, Safari, Android */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
}
:deep(.btn-box) {
  user-select: none;
  -webkit-user-select: none; /* Chrome, Safari, Android */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  span {
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari, Android */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
  }
}
</style>
